<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="demo">
      <h1>你好，{{name}}</h1>
    </div>

    <script>
      Vue.config.productionTip = false;

      let vm = new Vue({
        el: "#demo",
        data: {
          name: "小黑",
        },
      });

      console.log(vm);  // Vue的实例对象

      /* 
      $attrs: (...)
      $children: []
      $createElement: ƒ (a, b, c, d)
      $el: div#demo
      $listeners: (...)
      $options: {components: {…}, directives: {…}, filters: {…}, el: '#demo', _base: ƒ, …}
      $parent: undefined
      $refs: {}
      $root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
      $scopedSlots: {}
      $slots: {}
      $vnode: undefined
      name: (...)
      _c: ƒ (a, b, c, d)
      _data: {__ob__: Observer}
      _directInactive: false
      _events: {}
      _hasHookEvent: false
      _inactive: null
      _isBeingDestroyed: false
      _isDestroyed: false
      _isMounted: true
      _isVue: true
      _renderProxy: Proxy {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
      _self: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
      _staticTrees: null
      _uid: 0
      _vnode: VNode {tag: 'div', data: {…}, children: Array(1), text: undefined, elm: div#demo, …}
      _watcher: Watcher {vm: Vue, deep: false, user: false, lazy: false, sync: false, …}
      _watchers: [Watcher]
      $data: (...)
      $isServer: (...)
      $props: (...)
      $ssrContext: (...)
      get $attrs: ƒ reactiveGetter()
      set $attrs: ƒ reactiveSetter(newVal)
      get $listeners: ƒ reactiveGetter()
      set $listeners: ƒ reactiveSetter(newVal)
      get name: ƒ proxyGetter()
      set name: ƒ proxySetter(val)
      [[Prototype]]: Object
      */

    </script>
  </body>
</html>
